<template>
    <view class="container">
        <view class="header-type-box" data-flex="box:mean">
            <view v-for="(item,index) in typeList" @click="handleType(index)" :class="typeIndex == index ? 'one-type sel' : 'one-type'" :key="index">
                {{item.name}}
            </view>
        </view>
        <view style="height: 80upx;background-color: #5AC2FF;"></view>
        <view class="header-box" @click="navTo('/pages/index/search')">
            <uni-search-bar placeholder="搜索" :radius="20" bgColor="rgba(255,255,255,0.26)"></uni-search-bar>
        </view>
        
        <view v-if="typeIndex == 0">
            <view class="header-box">
                <!-- 头部轮播 -->
                <view class="carousel-section">
                    <!-- 标题栏和状态栏占位符 -->
                    <view class="titleNview-placing"></view>
                    <!-- 背景色区域 -->
                    <view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
                    <swiper class="carousel" circular @change="swiperChange">
                        <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navTo('/pages/index/richtxtDetail')">
                            <image :src="item.pic" />
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <!-- 分类 -->
            <view class="cate-section">
                <view v-for="(item,index) in cateList" :key="index" class="cate-item" @click="navTo('/pages/langwen/category2')">
                    <image src="/static/temp/c3.png"></image>
                    <text>团购活动</text>
                </view>
            </view>
            <view class="floor-list">
                <view class="recommend buy">
                    <view class="header" @click="navTo('/pages/index/timingBuy')">
                        <view class="title" data-flex>
                            <image class="s-img" src="/static/temp/secskill-img.png" mode="widthFix"></image>
                            <view class="buy-info" data-flex>
                                <text class="time">12点场</text>
                                <text class="leave">05:34:21</text>
                            </view>
                        </view>
                        <view class="right-btn">
                            查看全部
                            <image class="img" src="/static/langwen/arrow_right_3.png" mode=""></image>
                        </view>
                    </view>
                    <view class="main">
                        <!-- 商品列表 -->
                        <item :item="goods" v-for="(goods, goodsIndex) in goodsList" :key="goodsIndex"></item>
                    </view>
                </view>
            </view>
            <view class="floor-list" v-for="(floor, index) in floorList" :key="index">
                <view class="recommend">
                    <view class="header">
                        <view class="title">
                            <text>楼层{{wordToNum(index+1)}}</text>
                        </view>
                        <view class="right-btn" v-if="index%2 != 0">
                            查看全部
                            <image class="img" src="/static/langwen/arrow_right_3.png" mode=""></image>
                        </view>
                    </view>
                    <view v-if="index%2 == 0">
                        <!-- 图片 -->
                        <img class="floor-img" :src="'./static/langwen/floor'+index+'.png'" alt="">
                    </view>
                    <view v-else class="main">
                        <!-- 商品列表 -->
                        <item :item="goods" v-for="(goods, goodsIndex) in goodsList" :key="goodsIndex"></item>
                    </view>
                </view>
            </view>
        </view>
        <view v-else-if="typeIndex == 1">
            <goodsList></goodsList>
        </view>
        <view v-else-if="typeIndex == 2" style="background-color: #F5F5F5;">
            <view class="list-header" data-flex="main:center cross:center">
                <img src="../../static/langwen/header_l.png" alt="">
                <text>逛促销</text>
                <img src="../../static/langwen/header_r.png" alt="">
            </view>
            <view class="section-box" :style="{backgroundColor: (index ? '#fff' : '#f5f5f5'), paddingTop: (index ? '20px' : '0')}" v-for="(dayData,index) in dayList" :key="index">
                <view class="section-title">以下商品参与限时秒杀</view>
                <view class="sec-header">
                    <view class="sec-left">
                        <view>{{'促销时间：02月1'+ index +'日'}}</view>
                        <text>促销规则：满100减20元</text>
                    </view>
                    <view class="sec-right">{{'11:23结束促销'}}</view>
                </view>
                <view class="list-container">
                	<item :item="item" v-for="(item,subIndex) in goodsList" v-if="dayData.isShow || (!dayData.isShow && subIndex <= 5)" :key="subIndex"></item>
                </view>
                <view @click="handleShow(index)" v-if="!dayData.isShow" class="show-box">
                    展开
                    <img src="@/static/langwen/active_down.png" alt="">
                </view>
                <view @click="handleShow(index)" v-else class="show-box">
                    收起
                    <img src="@/static/langwen/active_up.png" alt="">
                </view>
            </view>
        </view>
        <view v-else-if="typeIndex == 3" class="type-3">
            <view class="section-box" v-for="(dayData,index) in dayList" :key="index">
                <view class="section-title">01月2{{index}}号上新</view>
                <view class="list-container">
                	<item :item="item" v-for="(item,index) in goodsList" :key="index"></item>
                </view>
            </view>
        </view>
        <view v-else-if="typeIndex == 4">
            <notice></notice>
        </view>
    </view>
</template>

<script>
    import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
    import item from '@/components/langwen/item.vue';
    import notice from '@/components/langwen/notice.vue';
    import goodsList from 'components/langwen/filter.vue';
    import share from 'components/langwen/share.vue';
    export default {
        name: 'index',
        components: {
            item,
            goodsList,
            notice,
            share
        },
        data() {
            return {
                typeIndex: 0,
                titleNViewBackground: '#5AC2FF',
                floorList: [{}, {}, {}, {}],
                cateList: [{},{},{},{}, {},{},{},{},{}, {}],
                dayList: [{}, {}, {}, {}],
                goodsList: [{
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    },
                    {
                        img: '/static/langwen/item.png',
                        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
                        original: 200,
                        now: 250
                    }
                ],
                carouselList: [{
                    pic: '/static/temp/holder.png'
                }, {
                    pic: '/static/temp/holder.png'
                }, {
                    pic: '/static/temp/holder.png'
                }, {
                    pic: '/static/temp/holder.png'
                }],
                typeList: [{
                    name: '首页'
                }, {
                    name: '精选'
                }, {
                    name: '活动'
                }, {
                    name: '上新'
                }, {
                    name: '动态'
                }]
            }
        },
        methods: {
            navTo(url) {
                uni.navigateTo({
                	url: url
                });
            },
            handleType(index) {
                if(index != this.typeIndex) {
                    this.typeIndex = index;
                }
            },
            handleShow(index) {
                this.$set(this.dayList[index], 'isShow', !this.dayList[index].isShow)
            },
            wordToNum(num) {
                //将数字（整数）转为汉字，从零到一亿亿，需要小数的可自行截取小数点后面的数字直接替换对应arr1的读法就行了
                var arr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九');
                var arr2 = new Array('', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万', '十', '百', '千', '亿'); //可继续追加更高位转换值
                if (!num || isNaN(num)) {
                    return "零";
                }
                var english = num.toString().split("")
                var result = "";
                for (var i = 0; i < english.length; i++) {
                    var des_i = english.length - 1 - i; //倒序排列设值
                    result = arr2[i] + result;
                    var arr1_index = english[des_i];
                    result = arr1[arr1_index] + result;
                }
                //将【零千、零百】换成【零】 【十零】换成【十】
                result = result.replace(/零(千|百|十)/g, '零').replace(/十零/g, '十');
                //合并中间多个零为一个零
                result = result.replace(/零+/g, '零');
                //将【零亿】换成【亿】【零万】换成【万】
                result = result.replace(/零亿/g, '亿').replace(/零万/g, '万');
                //将【亿万】换成【亿】
                result = result.replace(/亿万/g, '亿');
                //移除末尾的零
                result = result.replace(/零+$/, '')
                //将【零一十】换成【零十】
                //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十
                //将【一十】换成【十】
                result = result.replace(/^一十/g, '十');
                return result;
            }
        }
    }
</script>

<style lang="scss">
    .type-3 {
        background-color: #F5F5F5;
        .section-box {
            margin: 0;
            background-color: #F5F5F5;
        }
        .section-title {
            background-color: #F5F5F5;
            height: 90upx;
            line-height: 90upx;
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
        .section-box  .list-container {
            box-shadow: none;
            border-radius:10px;
        }
    }
    .list-header {
        padding: 10upx 0;
        img {
            width: 44upx;
            height: auto;
            height: 4px;
        }
        text {
            margin: 0 20upx;
            font-size:18px;
            font-weight:500;
            color:rgba(90,194,255,1);
        }
    }
    .section-box {
        background-color: #fff;
        margin-bottom: 20upx;
        .list-container {
            box-shadow:0px -2px 8px 0px rgba(0,0,0,0.1);
        }
        .show-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size:14px;
            font-weight:400;
            color:rgba(253,155,67,1);
            padding-bottom: 30upx;
            background-color: #fff;
            img {
                margin-left: 10rpx;
                width: 24rpx;
                height: 24rpx;
            }
        }
    }
    .section-title {
        text-align: center;
        font-size:12px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .sec-header {
        display: flex;
        justify-content: space-between;
        color: #fff;
        margin: 30upx 30upx 0;
        background:linear-gradient(270deg,rgba(255,158,53,1) 0%,rgba(255,101,24,1) 100%);
        border-radius:10px 10px 0px 0px;
        padding: 0 26rpx;
        .sec-left {
            view {
                margin: 12upx 0 4upx;
                font-size:14px;
            }
            text {
                font-size:11px;
                vertical-align: text-top;
            }
        }
        .sec-right {
            margin-top: 22upx;
            font-size:12px;
            font-weight:500;
        }
    }
    .list-container {
    	display: flex;
    	flex-wrap: wrap;
    	background:rgba(255,255,255,1);
    	box-shadow:0px 2rpx 16rpx 0px rgba(0,0,0,0.02);
    }
    .floor-list {
        background-color: #F5F5F5;
        padding-bottom: 10px;
        border-radius: 6px;
        .floor-img {
            vertical-align: top;
            width: 100%;
            height: auto;
            padding: 0 40upx;
            margin-bottom: 30upx;
            box-sizing: border-box;
        }
    }
    .one-type.sel {
        position: relative;
        font-size: 32upx;
        font-weight: 500;
        &::after {
            content: ' ';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 40upx;
            height: 6upx;
            border-radius: 4upx;
            background-color: #fff;
            transform: translateX(-50%);
        }
    }
    page {
        .header-type-box {
            position: fixed;
            top: 88upx;
            left: 0;
            right: 0;
            height: 80upx;
            z-index: 9;
            background-color: #5AC2FF;
            color: #fff;
            text-align: center;
            line-height: 80upx;
            font-size: 30upx;
        }

        .header-box {
            background-image: url(../../static/index_bg.png);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position-y: -1px;
            background-color: #F5F5F5;

            .uni-searchbar {
                background-color: rgba(0, 0, 0, 0);
            }
        }

        .cate-section {
            position: relative;
            z-index: 5;
            border-radius: 16upx 16upx 0 0;
        }
    }

    .carousel {
        width: 100%;
        height: 260upx;

        .carousel-item {
            width: 100%;
            height: 100%;
            padding: 0 28upx;
            overflow: hidden;
        }

        image {
            width: 100%;
            height: 100%;
            border-radius: 10upx;
        }
    }

    /* 分类 */
    .cate-section {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 30upx 22upx 10upx;
        background: #F5F5F5;

        .cate-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
            width: 20%;
            margin-bottom: 20upx;
        }

        /* 原图标颜色太深,不想改图了,所以加了透明度 */
        image {
            width: 88upx;
            height: 88upx;
            margin-bottom: 14upx;
            border-radius: 50%;
            opacity: 0.7;
            box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
        }
    }

    .recommend {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.02);
        border-radius: 6px;
        &.buy {
            .header .title {
                .s-img {
                    width: 162rpx;
                    height: 32rpx;
                    margin-right: 20rpx;
                }
                .buy-info {
                    width: 220rpx;
                    height: 36rpx;
                    border-radius: 18rpx;
                    border: 1rpx solid #FF6518;
                    line-height: 36rpx;
                     font-size: 22rpx;
                    .time {
                        width: 100rpx;
                        text-align: center;
                        color: #fff;
                        background-color: #FF6518;
                        display: block;
                    }
                    .leave {
                        padding-right: 8rpx;
                        width: 120rpx;
                        text-align: right;
                        color: #FF6518;
                        display: block;
                    }
                }
            }
        }
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30upx 40upx;
        .title {
            font-size: 16px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }
    
        .right-btn {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            .img {
                width: 15px;
                height: 15px;
            }
        }
    }
    .main {
        display: flex;
        padding-bottom: 15px;
        overflow: auto;
        .item {
        	width: 80px;
        	margin: 0 15px;
            box-sizing: content-box;
            &:last-child {
                padding-right: 15px;
            }
        }
    }
</style>
